<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="..\css\elementUi.css"/>
    <style>
        .el-form-item {
            margin-bottom: 7px;
        }

        .el-tabs__content {
            height: 400px;
        }

        .el-transfer-panel {
            width: 400px;
        }
    </style>
</head>
<body>
<div id="app">

    <el-row>
        <el-col :span="20">
            <el-menu theme="light" class="el-menu-demo" mode="horizontal">
                <div>
                    <el-button type="primary" size="large" icon="search" @click="queryResource">检索</el-button>
                    <el-button type="primary" size="large" @click="saveResource('resourceForm')">保存</el-button>
                    <el-button type="primary" size="large" @click="clearResource">清除</el-button>
                    <el-button type="primary" size="large" icon="delete" @click="deleteResource">删除</el-button>
                </div>

            </el-menu>
        </el-col>
        <el-col :span="4">
            <el-menu theme="light" class="el-menu-demo" mode="horizontal">
                <span style="font-size: 2em;">资源维护</span>
                <!--<el-menu-item index="2"></el-menu-item>-->
            </el-menu>
        </el-col>
    </el-row>
    <el-form :inline="true" :model="resourceForm" :rules="rules" ref="resourceForm" label-suffix=":"
             style="padding:30px 20px 0px 10px;" label-width="240px" class="demo-form-inline">
        <div style="padding: 30px;">

            <el-row justify="center" type="flex" class="row-bg">
                <input type="hidden" id="resourceHandleHidden" value=""/>
                <el-col :span="16">
                    <el-form-item label="资源" prop="resource">
                        <el-input placeholder=""
                                  icon="search"
                                  v-model="resourceForm.resource"
                                  :on-icon-click="resourceSearch"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 资源检索弹出框 -->
            <el-dialog title="资源" :visible.sync="resourceSearchDialog" top="5%">
                <el-table :data="resourceDataDialog" @row-dblclick="selectedRowResource" border style="width: 100%"
                          height="600">
                    <el-table-column property="resource" label="资源" width="350"></el-table-column>
                    <el-table-column property="description" label="资源描述" width="400"></el-table-column>
                </el-table>
            </el-dialog>

        </div>

        <!--<p style="line-height:100%">-->
        <template>
            <el-tabs type="border-card" v-model="activeName">
                <el-tab-pane label="主要信息" name="first">
                    <el-row type="flex" class="row-bg">
                        <el-col :span="20">
                            <el-form-item label="描述">
                                <el-input placeholder="" style="width: 600px;"
                                          v-model="resourceForm.description"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg" :gutter="4">
                        <el-col :span="12">
                            <el-form-item label="状态">
                                <el-select v-model="resourceForm.statusFk" placeholder="请选择">
                                    <el-option
                                            v-for="item in statusList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg">
                        <el-col :span="8">
                            <el-form-item label="有效 自">
                                <el-date-picker placeholder="选择日期" style="width: 220px;"
                                                v-model="resourceForm.dateEffect"></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg">
                        <el-col :span="8">
                            <el-form-item label="有效 至">
                                <el-date-picker placeholder="选择日期" style="width: 220px;"
                                                v-model="resourceForm.dateExpire"></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>

                </el-tab-pane>
                <el-tab-pane label="自定义字段" name="second">
                    自定义字段
                </el-tab-pane>
            </el-tabs>
        </template>
    </el-form>
</div>
</body>
<!-- 先引入 Vue -->
<script src="..\lib\vue.js"></script>
<!-- 引入组件库 -->
<script src="..\lib\elementUi.js"></script>
<script type="text/javascript" src="..\lib\mock.js"></script>
<script src="..\lib\axios.js"></script>
<script type="text/javascript" src="resource.js"></script>
</html>